<template>
  <view>
    <l-background />
    <view class="bg-white padding-30 header">
      <view class="margin-top-10 flex-row align-center">
        <l-avatar size="64rpx" />
        <text class="text-36 color-t1 text-bold margin-left-16">{{ username }}</text>
      </view>
      <view class="card margin-top-40 padding-tb-40 padding-lr-30 flex-row align-center">
        <view class="flex-item">
          <text class="text-24 color-t3">剩余待还(元)</text>
          <view class="margin-top-16">
            <text class="text-36 text-bold color-error">{{ info.outstanding.toFixed(2) }}</text>
          </view>
        </view>
        <view class="flex-item">
          <text class="text-24 color-t3">已还账款(元)</text>
          <view class="margin-top-16">
            <text class="text-36 text-bold color-primary">{{ info.repayments.toFixed(2) }}</text>
          </view>
        </view>
        <view class="flex-item">
          <text class="text-24 color-t3">应还账款(元)</text>
          <view class="margin-top-16">
            <text class="text-36 text-bold color-primary">{{ info.accounts.toFixed(2) }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="padding-lr-30 padding-bottom-30">
      <template v-if="list.length">
        <view v-for="(item,index) in list" :key="index" class="list-item margin-top-30" @click="toDetail(item)">
          <view class="title flex-row justify-between align-center">
            <text class="text-28 color-t1">{{ item.affiliatedBill }}</text>
            <text class="tbb-arrow-right color-t3 text-24" />
          </view>
          <view class="flex-row justify-between align-center">
            <view class="flex-row align-end">
              <template v-if="item.outstanding">
                <view class="margin-bottom-10">
                  <text class="text-28 color-t1 text-bold">￥</text>
                </view>
                <text class="text-60 color-t1 text-bold">{{ item.outstanding }}</text>
              </template>
              <text v-else class="text-32 color-t3">已还清</text>
            </view>
            <tui-button v-if="item.outstanding && auth.includes('creditManagement_collections')" width="144rpx" height="64rpx" :size="28" @click="toPaymentDetail(item)">确认收款</tui-button>
          </view>
        </view>
        <view class="flex-row flex-center margin-top-20">
          <text class="text-24 color-t3">建账日期：{{ info.separatelyDate }}</text>
        </view>
        <l-footer :has-more="hasMore" />
      </template>
      <view v-else>
        <tui-skeleton v-if="showSkeleton" is-loading />
        <l-no-data v-else text="暂无数据" type="data" />
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { dateFormat } from '@/common/util'
import { pageHistoricalBill, getOneCreditManagement } from '../api'
export default {
  name: 'AccountDetail',
  data() {
    return {
      username: '',
      page: 1,
      pageSize: 10,
      showSkeleton: true,
      hasMore: true,
      list: [],
      info: {
        outstanding: 0,
        repayments: 0,
        accounts: 0
      }
    }
  },
  computed: {
    ...mapGetters({
      auth: 'auth'
    })
  },
  onLoad(e) {
    this.username = e.username
  },
  onShow() {
    this.reload()
  },
  onPullDownRefresh() {
    this.reload()
  },
  onReachBottom() {
    this.nextPage()
  },
  methods: {
    async getInfo() {
      const [err, res] = await getOneCreditManagement({
        username: this.username
      })
      if (!this.$http.errorCheck(err, res)) return false
      this.info = res.data.data
    },
    // 获取列表
    async getList() {
      const [err, res] = await pageHistoricalBill({
        username: this.username,
        current: this.page,
        limit: this.pageSize
      })
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!res.data.data) list = []
      if (list.length < this.pageSize) this.hasMore = false
      if (this.page === 1) this.list = list
      else this.list.push(...list)
    },
    reload() {
      this.page = 1
      this.hasMore = true
      this.getList()
      this.getInfo()
    },
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getList()
      }
    },
    toDetail(item) {
      this.jump('/user/account-detail/account-detail?username=' + this.username + '&affiliatedBill=' + item.affiliatedBill)
    },
    toPaymentDetail(item) {
      const paymentDate = dateFormat()
      const amountRepaid = item.recorded - item.repayments
      const obj = {
        id: '',
        affiliatedBill: item.affiliatedBill,
        amountCollected: '',
        payingCustomer: item.username,
        paymentDate,
        paymentMethod: '',
        handler: '',
        invoice: '',
        remarks: '',
        screenshotUrl: '',
        amountRepaid: item.outstanding
      }
      this.setPaymentDetail(obj)
      this.jump('/user/payment-details/payment-details?type=add&amountRepaid=' + amountRepaid.toFixed(2) + '&noRecorded=' + item.noRecorded.toFixed(2))
    },
    ...mapMutations({
      setPaymentDetail: 'user/setPaymentDetail'
    })
  }
}
</script>

<style scoped lang="scss">
.header{
  border-radius:0 0 20rpx 20rpx;
  @include position(sticky,0);
}
.card{
  height: 172rpx;
  border-radius:20rpx;
  background:$color-secondary;
}
.list-item{
  background: #FFFFFF;
  border-radius: 20rpx;
  border: 2rpx solid $color-border;
  padding:24rpx 30rpx;
}
.title{
  height:40rpx;
  margin-bottom:24rpx;
}
</style>
